﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .red
        {
            background-color: Red;
            width: 200px;
            height: 200px;
        }
        .yellow
        {
            background-color: Yellow;
            width: 100px;
            height: 100px;
        }
        .blue
        {
            background-color: Blue;
            width: 50px;
            height: 50px;
        }
    </style>
    <script src="Common.js" type="text/javascript"></script>
    <script type="text/javascript">


        BindEvent(window, "load", function (e) {
            // 追加子元素
            var dRed = Get("divRed");
            var dYellow = Get("divYellow");
            var index = 0;
            BindEvent("btnCreate", "click", function (e) {
                // 创建元素
                var div = document.createElement("div");
                div.className = "blue";
                // 创建文本节点
                var txt = document.createTextNode("abc");
                SetText(div, index++);
                dRed.appendChild(div);
                dRed.appendChild(txt);
            });

            BindEvent("btnClone", "click", function (e) {
                //var div = dYellow.cloneNode();
                var div = dYellow.cloneNode(true);
                dRed.appendChild(div);

            });
        });
    
    </script>
</head>
<body>
    <input id="btnCreate" type="button" value="CreateElement" />
    <input id="btnClone" type="button" value="Clone" />
    <div id="divRed" class="red">
    </div>
    <div id="divYellow" class="yellow">
        <div id="divBlue" class="blue">
        </div>
    </div>
</body>
</html>
